<template>
  <div clas="xima">
    <header>
      <ul class="breadcrumb">
        <li>
          <router-link to="/foreign">合作</router-link>
        </li>
        <li>
          <router-link to="/cooperates">合作伙伴</router-link>
        </li>
      </ul>
    </header>
    <div class="domesticContent">
      <div class="row">
        <div class="col-xs-12 col-md-8">
          <!-- 时间线开始 -->
          <div class="timeline-small">
            <div class="timeline-small-body">
              <ul>
                <li v-for="item in coorList" :key="item.name">
                  <div class="date"><a :href="item.href">{{item.name}}</a></div>
                  <div class="bullet pink"></div>
                  <div class="desc">
                      <div><img :src="item.src" alt=""></div>
                      <h4>{{item.decript}}</h4>
                  </div>
                </li>
               </ul>
           </div>
          </div>
          <!-- 时间线结束 -->
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li>
                  <router-link to="/foreign"><span>德国合作</span></router-link>
                </li>
                <hr>
                <li>
                  <router-link to="/domestic">国内合作</router-link>
                </li>
                 <hr>
                <li>
                  <router-link to="/domestic">合作伙伴</router-link>
                </li>
              </ul>
            </div>
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <hr
                style="border-top: 1px solid #ccc"
                width="100%"
                color="#ccc"
                size="1"
              />
                <img src="/static/assets//code.jpg" alt="" />
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      coorList:[
        {href:"http://www.bfh.com.cn/Html/Index.html",name:"北京友谊医院",src:"/static/assets/bjyy.jpg",decript:""},
        {href:"http://www.xyhospital.com/",name:"中国中医科学院西苑医院",src:"/static/assets//zgzykxxw.png",decript:""},
        {href:"http://www.pgyy.com/",name:"北京市平谷区人民医院",src:"/static/assets//pgq.jpg",decript:""},
        {href:"http://www.asch.net.cn/",name:"航天中心医院",src:"/static/assets//htzx.jpg",decript:""},
        {href:"http://www.xtshos.com.cn/",name:"北京市小汤山医院",src:"/static/assets//xts.jpg",decript:""},
        {href:"https://www.fuwaihospital.org/Hospitals/Main.htm",name:"中国医学科学院阜外医院",src:"/static/assets//zgyxky.jpg",decript:""},
        {href:"http://www.dongfangyy.com.cn/",name:"北京中医药大学东方医院",src:"/static/assets//df.jpg",decript:""},
        {href:"http://www.yxhospital.com/",name:"玉溪市人民医院",src:"/static/assets//yxsrm.jpg",decript:""},
        {href:"http://www.dhzyy.com/",name:"德宏州人民医院",src:"/static/assets//dhz.jpg",decript:""},
        {href:"http://www.hhzyy.com/",name:"红河州人民医院",src:"/static/assets//hhzrm.jpg",decript:""},
        {href:"https://www.cjxrmyy.cn/",name:"澄江县人民医院",src:"/static/assets//djxrm.jpg",decript:""},
        {href:"http://www.cxzrmyy.com/",name:"楚雄州人民医院",src:"/static/assets//cxz.jpg",decript:""},
        {href:"http://www.jxjjsdyrmyy.cn/",name:"九江市第一人民医院",src:"/static/assets//jjsdyrm.jpg",decript:""},
        {href:"http://www.jxsjjslsqrmyy.cn/",name:"九江市濂溪区人民医院",src:"/static/assets//jjslxq.jpg",decript:""},
        {href:"http://gzsums.net/",name:"中山大学附属第一医院",src:"/static/assets//zsdxfs.jpg",decript:""},
        {href:"http://www.gdhtcm.com/",name:"广东省中医院",src:"/static/assets//gdsz.jpg",decript:""},
        {href:"http://www.gdhtcm.com/",name:"广东省中医院珠海医院",src:"/static/assets//zyyzh.jpg",decript:""},
        {href:"https://www.fsyyy.com/",name:"佛山市第一人民医院",src:"/static/assets//fssdy.jpg",decript:""},
        {href:"http://www.bddhospital.com.cn/",name:"保定市中心医院",src:"/static/assets//bdszx.jpg",decript:""},
        {href:"http://www.bfefy.com/",name:"河北北方学院附属第二医院",src:"/static/assets//hbbf.jpg",decript:""},
        {href:"http://www.myzxyy.com/",name:"绵阳市中心医院",src:"/static/assets//my.jpg",decript:""},
        {href:"http://www.syhospital.com/",name:"三亚市人民医院",src:"/static/assets//sysrm.jpg",decript:""},
        {href:"http://www.tysrmyy.cn/",name:"太原市人民医院",src:"/static/assets//tysrm.jpg",decript:""},
        {href:"",name:"太原市第四人民医院",src:"/static/assets//tydsrm.jpg",decript:""},
        {href:"http://www.xy120.net/",name:"咸阳市中心医院",src:"/static/assets//xyszx.jpg",decript:""},
        {href:"http://www.bjzxyy.com/index.php",name:"宝鸡市中心医院",src:"/static/assets//bjszx.jpg",decript:""},
        {href:"http://www.akzxyy.com/#/home",name:"安康市中心医院",src:"/static/assets//akszx.jpg",decript:""},
        {href:"http://www.sy24.cn/shenyang/yiyuan/8808.html",name:"中国医科大学附属第一医院",src:"/static/assets//sys.jpg",decript:""},
      ]
    }
  }
}
</script>
<style>

 /* 右边内容开始 */
  .guide {
  width: 220%;
}
.guideTop {
  width:100%;
  background-color:#005051;;
  box-sizing: border-box;
}

.guideTop ul {
  list-style-type: none;
  box-sizing:border-box;
}
.guideTop ul li{
  padding:.625rem /* 10/16 */;
}
.guideTop ul hr {
  padding-left:20px;
  padding-right:20px;
  border:.0625rem /* 1/16 */ solid #fff;
  margin:0;
}

.guideTop ul li a {
  padding:.625rem /* 10/16 */;
  color: #fff;
  font-size: 16px;
}
.guideTip{
  margin-top:1.25rem /* 20/16 */;
}
.guideTip .connect_h {
  font-size: 28px;
  text-indent: 0;
  margin-bottom:1.875rem /* 30/16 */;
}
.guideTip hr{
  margin:0;
  padding:0;
}

.guideTip div {
  white-space: nowrap;
  margin:1.25rem /* 20/16 */ 0;
}

.guideTip div span {
  word-break: break-all;
}
  /* 右边内容结束 */
    @media screen and (min-width: 992px) {
        /* 时间线开始 */
        .timeline-small {
            width:100%;
            height:100%;
            min-width: 350px;
            min-height: 630px;
            overflow: hidden;
            position:relative;
            padding-top:1.875rem /* 30/16 */;
            box-shadow: 0 0 40px #a0a0a0;
            font-family: 'Open Sans', sans-serif;
        }
        .timeline-small-body ul {
            padding: 1em 0 0 2em;
            margin: 0;
            list-style: none;
            position: relative;
        }
        .timeline-small-body .bullet:before {
            content: ' ';
            height: 100%;
            width: 5px;
            background-color: #d9d9d9;
            position: absolute;
            top: 0;
            left: 28%;
            z-index: -1;
        }
        .timeline-small-body li div {
            display: inline-block;
            margin: 1em 0;
            vertical-align: top;
        }
        .timeline-small-body .bullet {
            width: 1.875rem /* 30/16 */;
            height:1.875rem /* 30/16 */;
            box-sizing: border-box;
            border-radius: 50%;
            background: #fff;
            z-index: 1;
            margin-right: 3.125rem /* 50/16 */;
            margin-left:1.875rem /* 30/16 */;
            /* margin-top: 7%; */
        }
        .timeline-small-body .bullet.pink {
            background-color: #005051;
            border: 3px solid #F93B69;
        }
        .timeline-small-body .bullet.green {
            background-color: lightseagreen;
            border: 3px solid #B0E8E2;
        }
        .timeline-small-body .bullet.blue {
            background-color: aquamarine;
            border: 3px solid cadetblue;
        }
        .timeline-small-body .bullet.orange {
            background-color: salmon;
            border: 3px solid #EB8B6E;
        }
        .timeline-small-body .date {
            width: 23%;
            font-size: 0.75em;
            padding-top: 0.40rem;
            /* padding-right: 2rem; */
            text-align:right;
        }
        .timeline-small-body .date a{
          font-size:16px;
          color:#000;
          font-weight:600;
        }
        .timeline-small-body .desc {
            width: 60%;
            margin:0;
        }
        .timeline-small-body .desc div img{
           width:300px;
           height:139px;
           border:1px solid red;
        }
        .timeline-small-body h4 {
            margin: 0;
            font-size: 0.7em;
            font-weight: 400;
            color: #808080;
        }
        /* 时间线结束 */
         /* 右边内容开始 */
  .guideTop {
    background-color: #f8f8f8;
    margin-bottom: 1.875rem /* 30/16 */;
  }
  .guideTop ul {
    margin: 0;
    padding-bottom: 0;
    list-style-type: none;
    box-sizing: border-box;
  }
  .guideTop ul hr {
    padding: 0;
    margin: 0;
    height: 2px;
    margin: 0;
  }
  .guideTop ul li {
    margin-left: 0;
    padding-bottom: 0;
    list-style-type: none;
    padding: 0;
  }
  .guideTop ul li a {
    padding: 1.25rem /* 20/16 */;
    position: relative;
    color: #fff;
    background-color: #005051;
    font-weight: 600;
    display: block;
  }
  .guideTip .connect_h {
    font-size: 28px;
    text-indent: 0;
  }

  .guideTip div {
    height: 30px;
  }
  .guideTip hr {
    margin: 0 0 1.875rem /* 30/16 */;
    padding: 0;
  }
  .guideTip img {
    display: inline;
    border: 1px solid #ccc;
    margin-bottom: 1.875rem /* 30/16 */;
  }
  .guideTip p {
    text-align: left;
  }
  .guideTop div span {
    word-break: break-all;
    word-wrap: break-word;
  }
  /* 右边内容结束 */
    }
</style>